<html lang="en">
 <head>
   <script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script>
 </head>
 <body>
    <h3>Filters</h3>

    <div style="margin-top: 16px;">
        <button id='btn-filter-cf' onclick="filterModels('Collaborative Filtering')">Collaborative Filtering</button>
        <button id='btn-filter-content' onclick="filterModels('Content-Based')">Content Based</button>
        <button id='btn-filter-explainable' onclick="filterModels('Explainable')">Explainable</button>
        <button id='btn-filter-nextitem' onclick="filterModels('Next-Item')">Next-Item</button>
        <button id='btn-filter-nextbasket' onclick="filterModels('Next-Basket')">Next-Basket</button>
        <button id='btn-filter-baseline' onclick="filterModels('Baseline')">Baseline</button>
    </div>
    <div style="margin-top: 16px;">
        <input type="text" id="filter-text-box" size="50" spellcheck="false" placeholder="Filter by Text" oninput="onFilterTextBoxChanged()" />
    </div>
    <div style="margin-top: 16px;">
        <button id="btn-clear-filter" onclick="clearFilters()" disabled>Clear Filters</button>
    </div>
    <br />
    <div id="grid" class="ag-theme-quartz-auto-dark" style="height: 480px"></div>
 </body>
</html>
<script type="text/javascript" src="data.js"></script>
<script type="text/javascript" src="../_static/models/data.js"></script>
<script type="text/javascript" src="_static/models/data.js"></script>
<script type="text/javascript">
    function LinkRenderer(url, title) {
        return `<a href="${url}" target="_blank">${title}</a>`
    }
    // Row Data Interface
    const github_url = "https://github.com/PreferredAI/cornac/tree/master/";

    // Grid API: Access to Grid API methods
    let gridApi;

    function onFilterTextBoxChanged() {
        gridApi.setGridOption(
            "quickFilterText",
            document.getElementById("filter-text-box").value,
        );

        if (document.getElementById("filter-text-box").value.length > 0) {
            document.getElementById("btn-clear-filter").disabled=false; // Enable clear button
        } else {
            document.getElementById("btn-clear-filter").disabled=true; // Disable clear button
        }
    }

    function resetButtonColors() {
        var btns = document.getElementsByTagName('button');
        for (var i = 0; i < btns.length; i++) {
            btns[i].style.background="";
            btns[i].style.color="";
        }
    }

    function filterModels(filter) {
        gridApi.setColumnFilterModel("Type", {
            type: "contains",
            filter: filter,
        })
        .then(() => {
            gridApi.onFilterChanged();
            document.getElementById("filter-text-box").value=""; // Clear text box (if any)
            document.getElementById("btn-clear-filter").disabled=false; // Enable clear button
            
            // reset all button colors
            resetButtonColors();

            // change button color for selected button
            var btnId = "";

            if (filter === "Collaborative Filtering") {
                btnId = "btn-filter-cf";
            } else if (filter === "Content-Based") {
                btnId = "btn-filter-content";
            } else if (filter === "Explainable") {
                btnId = "btn-filter-explainable";
            } else if (filter === "Next-Item") {
                btnId = "btn-filter-nextitem";
            } else if (filter === "Next-Basket") {
                btnId = "btn-filter-nextbasket";
            } else if (filter === "Baseline") {
                btnId = "btn-filter-baseline";
            } 
            document.getElementById(btnId).style.background="#A3361F";
            document.getElementById(btnId).style.color="white";
        });
    }

    function clearFilters(){
        gridApi.setColumnFilterModel("Type", null)
        .then(() => {
            gridApi.onFilterChanged();
        });
        // reset filter box
        document.getElementById("filter-text-box").value="";
        gridApi.setGridOption(
            "quickFilterText",
            "",
        );
        document.getElementById("btn-clear-filter").disabled=true; // Disable clear button

        // reset all button colors
        resetButtonColors();
    }

    // Grid Options: Contains all of the grid configurations
    const gridOptions = {
        // Data to be displayed
        rowData: data,
        // Columns to be displayed (Should match rowData properties)
        columnDefs: [
            { field: "Year" },
            { 
                field: "Name",
                headerName: "Model Name (Hover over for package name)",
                
                flex: 4,
                cellRenderer: params => LinkRenderer(params.data.docs, params.data.Name),
                tooltipValueGetter: (params) => "Package Name: " + params.data.packages,
            },
            { field: "Type", flex: 2 },
            { 
                field: "PyTorch", 
                headerName: "PyTorch",
                cellRenderer: params => params.value ? "✅" : "",
            },
            { 
                field: "TensorFlow",
                headerName: "TensorFlow",
                cellRenderer: params => params.value ? "✅" : "",
            },
        ],
        defaultColDef: {
            flex: 1,
            filter: true,
            // floatingFilter: true,
        },
        pagination: true,
        paginationAutoPageSize: true
    };
    // Create Grid: Create new grid within the #myGrid div, using the Grid Options object
    gridApi = agGrid.createGrid(document.querySelector("#grid"), gridOptions);
</script>